<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北极光之夜</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .main {
            width: 100%;
            min-height: 100vh;
            overflow: hidden;
            background-color: rgb(30, 49, 71);
        }

        .txt {
            font-family: 'fangsong';
            font-weight: 900;
            font-size: 80px;
            letter-spacing: 3px;
            fill: transparent;
            stroke: url("#yanse");
            stroke-width: 1.5px;
            stroke-dasharray: 625;
            stroke-dashoffset: 625;
            animation: draw 5s linear infinite;
        }

        @keyframes draw {

            0%,
            5% {
                stroke-dasharray: 625;
                stroke-dashoffset: 625;
            }

            40%,
            60% {
                stroke-dasharray: 625;
                stroke-dashoffset: 0;
            }

            100% {
                stroke-dasharray: 625;
                stroke-dashoffset: 625;
            }
        }

        .sv {
            position: absolute;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="sv">
            <svg width="500" height="200">
                <defs>
                    <linearGradient id="yanse">
                        <stop offset="33%" stop-color="#00BFFF">
                            <animate attributeName="stop-color" from="#00BFFF" to="#FF8C00" dur="5s"
                                repeatCount="indefinite"></animate>
                        </stop>
                        <stop offset="66%" stop-color="#00FFFF"></stop>
                        <stop offset="100%" stop-color="#00FA9A">
                            <animate attributeName="stop-color" from="#00FA9AF" to="#FF00FF" dur="5s"
                                repeatCount="indefinite"></animate>
                        </stop>
                    </linearGradient>
                </defs>
                <text x="30" y="120" class="txt">北极光之夜。</text>
            </svg>
        </div>
        <div class="sv">
            <svg width="500" height="200">
                <defs>
                    <linearGradient id="yanse">
                        <stop offset="33%" stop-color="#00BFFF">
                            <animate attributeName="stop-color" from="#00BFFF" to="#FF8C00" dur="5s"
                                repeatCount="indefinite"></animate>
                        </stop>
                        <stop offset="66%" stop-color="#00FFFF"></stop>
                        <stop offset="100%" stop-color="#00FA9A">
                            <animate attributeName="stop-color" from="#00FA9AF" to="#FF00FF" dur="5s"
                                repeatCount="indefinite"></animate>
                        </stop>
                    </linearGradient>
                </defs>
                <text x="30" y="120" class="txt">北极光之夜。</text>
            </svg>
        </div>
        <div class="sv">
            <svg width="500" height="200">
                <defs>
                    <linearGradient id="yanse">
                        <stop offset="33%" stop-color="#00BFFF">
                            <animate attributeName="stop-color" from="#00BFFF" to="#FF8C00" dur="5s"
                                repeatCount="indefinite"></animate>
                        </stop>
                        <stop offset="66%" stop-color="#00FFFF"></stop>
                        <stop offset="100%" stop-color="#00FA9A">
                            <animate attributeName="stop-color" from="#00FA9AF" to="#FF00FF" dur="5s"
                                repeatCount="indefinite"></animate>
                        </stop>
                    </linearGradient>
                </defs>
                <text x="30" y="120" class="txt">北极光之夜。</text>
            </svg>
        </div>
    </div>

    <script>
        document.addEventListener("mousemove", (e) => {
            gsap.to(".sv", {
                x: e.clientX,
                y: e.clientY,
                stagger: -0.02,
            });
        });
    </script>
</body>

</html>